<template>
    <div class='detailPage'>
    
        <div class='header'>
            <router-link to='/'>
            <div class='goback'>
                <i class='iconfont icon-mjiantou-copy'></i>
            </div>
            </router-link>
            <h2>西贝莜面村（深圳中心城店）</h2>
        </div>
    
        <div class='main'>
            <div class="detail-tabbar">
                <router-link exact active-class='z-act' :to='val.path' :key="key" v-for='(val,key) in tabbarList'>
                    <span>{{ val.name }}</span>
                </router-link>
                <!-- <router-link to="/detail/evaluate"><span>评价</span></router-link>
                        <router-link to="/detail/shops"><span>商家</span></router-link> -->
            </div>
            <!-- <div class='detail-view'> -->
                <router-view></router-view>
            <!-- </div> -->
    
        </div>
    
        <div class='footer'>
            <div class='cart'>
    
            </div>
            <div class='cartCount'>
                <span>购物车空空如也～</span>
            </div>
            <div class='totalPrice'>
                <span>¥20起送</span>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'Detail',
    data() {
        return {
            tabbarList: [
                {
                    path: '/detail/order',
                    name: '点菜'
                },
                {
                    path: '/detail/evaluate',
                    name: '评价'
                },
                {
                    path: '/detail/business',
                    name: '商家'
                }
            ],
            detailList: ['  热销', '  K Coffee', '  桶', '  美味汉堡卷', '  吮指原味鸡', '  鸡翅/鸡排', '  鸡翅/鸡排', '  小食/配餐', '  甜品/冰淇淋'],
            dList: [
                {
                    path: 'https://img.meituan.net/100.100.90/xianfu/ef6f0d22421cc2efea895da79d407a49129024.jpg',
                    title: '二块新奥尔良烤翅',
                    dir: '鲜嫩多汁，具烧烤香和甜辣味',
                    price: '¥11.5'
                },
                {
                    path: 'https://img.meituan.net/100.100.90/xianfu/ef6f0d22421cc2efea895da79d407a49129024.jpg',
                    title: '二块新奥尔良烤翅',
                    dir: '鲜嫩多汁，具烧烤香和甜辣味',
                    price: '¥11.5'
                },
                {
                    path: 'https://img.meituan.net/100.100.90/xianfu/ef6f0d22421cc2efea895da79d407a49129024.jpg',
                    title: '二块新奥尔良烤翅',
                    dir: '鲜嫩多汁，具烧烤香和甜辣味',
                    price: '¥11.5'
                },
                {
                    path: 'https://img.meituan.net/100.100.90/xianfu/ef6f0d22421cc2efea895da79d407a49129024.jpg',
                    title: '二块新奥尔良烤翅',
                    dir: '鲜嫩多汁，具烧烤香和甜辣味',
                    price: '¥11.5'
                }
            ],



        }
    },
    // created(){

    //     axios.get('http://localhost:3005/detail',{

    //     }).then(function(res){
    //         console.log(res)
    //     }).catch(function(err){
    //         console.log(err)
    //     })

    // }
}
</script>

<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';

.detailPage {
    width: 100%;
    height: 100%;
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    .header {
        height: px2rem(86);
        border-bottom: px2rem(2) solid #ddd;
        position: relative;

        .goback {
            width: px2rem(116);
            height: px2rem(86);
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            i {
                font-size: px2rem(48);
                color: #333;
                line-height: px2rem(86);
            }
        }

        h2 {
            display: block;
            width: px2rem(490);
            margin: 0 auto;
            font-size: px2rem(34);
            line-height: px2rem(86);
            color: #444;
        }
    }
    .main {
        flex: 1;
        // display: flex;
        // flex-direction: column;
        .detail-tabbar {
            height: px2rem(90);
            width: 100%;
            border-bottom: px2rem(2) solid #f0f0f0;
            display: flex; // position: relative;
            a {
                flex: 1;
                color: #666;
                text-align: center;
                position: relative; // text-align: center;
                span {
                    display: inline-block;
                    box-sizing: border-box;
                    font-size: px2rem(32);
                    line-height: px2rem(90);
                }
            }

            .z-act::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                margin-left: px2rem(-52);
                height: 0;
                width: px2rem(96);
                border: px2rem(4) solid #FFD161; // border-color:  #FFD161 transparent #FFD161 transparent;
            }
        }
        .detail-view {
            flex: 1;
        }
    }
    .footer {
        height: px2rem(100);
        width: 100%;
        position: fixed;
        bottom: 0;
        border-top: px2rem(2) solid #cacaca;
        background-color: rgba(51, 51, 51, 0.9); // box-sizing: border-box;
        // padding-left: px2rem(74);
        display: flex;
        .cart {
            width: px2rem(100);
            height: px2rem(114);
            position: absolute;
            left: px2rem(24);
            top: px2rem(-38);
            background: url('./img/cart.png') no-repeat px2rem(0) px2rem(-228);
        }

        .cartCount {
            flex: 1;
            box-sizing: border-box;
            padding-left: px2rem(148);
            span {
                font-size: px2rem(26);
                line-height: px2rem(100);
                color: #888;
            }
        }
        .totalPrice {
            width: px2rem(220);
            font-size: px2rem(32);
            line-height: px2rem(100);
            text-align: center;
            color: #999;
        }
    }
}
</style>
